<template>
	<div id="page4">
	<div class="toptool">
		<div class="toolstyle">
			<img src="../assets/images/input.png" />
			<img src="../assets/images/save.png" />
			<img src="../assets/images/export.png"/>
			<img src="../assets/images/delete.png"/>
			<img src="../assets/images/userpub.png"/>
			<img src="../assets/images/order.png"/>
			<div class="isearch">
			<el-input placeholder="请输入患者号、患者姓名、编号、症状查询" v-model="input3" class="input-with-select" size="mini" style="font-size: 4px;">
			<el-button slot="prepend" icon="el-icon-search"></el-button>
			<img src="../assets/images/Search.png" />
			  </el-input>
			  </div>
		</div>
	<!--,expandRowKeys: ['10001']-->
		<!--只允许展开一个-->
	</div>
		<vxe-table 
		ref="rowexpand"
		stripe
		align="center"
		class="vcetable"
        row-id="id"
		border
		:cell-style="cellStyle"
        :row-config="{isHover: true}"
        :data="tableData"
        :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: true}"
		:expand-config="{accordion: true,expandRowKeys: ['10001']}"
        :radio-config="{labelField: 'name'}"
		:column-config="{resizable: true}"
		@cell-dblclick="handCelldbClick"
		@cell-click="handCellClick"
		header-cell-style="background-color:#4ac4c0;">
	
		    <vxe-column type="expand" width="40">
		              <template #content="{ row, rowIndex }" >
		                <div  class="expand-wrapper" style="background-color: #eee;">
		                  <ul class="nownumber">
		                    <li>
		                      <span class="nownumber">当前编号：</span>
		                      <span class="nownumberid">{{ row.id }}</span>
							  <span class="curetime">时间：</span>
							  <span>{{row.time}}</span>
							<span class="userbtn">
								<vxe-button status="warning" round>编辑</vxe-button>
							    <vxe-button status="primary" round>选号</vxe-button>
							</span>
		                    </li>
							<li style="width: 100%;height: 0; border-bottom:1px dashed #000;padding-top: 5px;">
							</li>
							</ul>
							<ul class="patientInformation">
								<table  width="900" height="100">
								<tr>
								  <td>身份证号：{{ row.identify }}</td>
								  <td>社保编号：{{ row.identify }}</td>
								  <td>计划医生：{{ row.planedoctor }} </td>
								</tr>
								<tr>
								  <td>放射历史：{{ row.atreated }}</td>
								  <td>检测：{{ row.planet }}次</td>
								  <td>治疗医生：{{ row.planedoctor}}</td>
								</tr>
								<tr>
								  <td>历史剂量：{{ row.HistoricalDose }}CT</td>
								  <td>本次剂量：{{ row.ThisDose }}CT</td>
								</tr>
								</table>
							</ul>
							<li style="width: 100%;height: 0; border-bottom:1px dashed #000;list-style: none;padding-top:10px ;"></li>
							<ul class="bottomtable">
							<table width="900" cellspacing="20">
							  <tr>
							    <td>靶点编号</td>
							    <td>X轴（mm）</td>
								<td>Y轴（mm）</td>
								<td>Z轴（mm）</td>
								<td>准直器号</td>
								<td>起始角度（°）</td>
								<td>终止角度（°）</td>
								<td>是否遮挡</td>
								<td>治疗时长</td>
							  </tr>
							  <tr>
							    <td>001</td>
							    <td>2.0</td>
								<td>1000.1</td>
								<td>20.1</td>
								<td>CM1001</td>
								<td>3</td>
								<td>5</td>
								<td>/</td>
								<td>20s</td>
							  </tr>
							  <tr>
							    <td>002</td>
							    <td>2.0</td>
							  	<td>1000.1</td>
							  	<td>20.1</td>
							  	<td>CM1001</td>
							  	<td>3</td>
							  	<td>5</td>
							  	<td>/</td>
							  	<td>20s</td>
							  </tr>
							  <tr>
							    <td>003</td>
							    <td>2.0</td>
							  	<td>1000.1</td>
							  	<td>20.1</td>
							  	<td>CM1001</td>
							  	<td>3</td>
							  	<td>5</td>
							  	<td>/</td>
							  	<td>20s</td>
							  </tr>
							  
							</table>

		                  </ul>
		                </div>
		              </template>
		            </vxe-column>
					
          <vxe-column type="checkbox" width="40" min-width="40"></vxe-column>
          <vxe-column field="id" title="编号" width="110" min-width="110"></vxe-column>
		  <vxe-column field="name" title="姓名" width="110" min-width="110"></vxe-column>
		  <vxe-column field="sex" title="性别" width="50" min-width="50"></vxe-column>
		  <vxe-column field="age" title="年龄" width="50" min-width="50"></vxe-column>
		  <vxe-column field="telphone" title="联系方式" width="120" min-width="120"></vxe-column>
		  <vxe-column field="planedoctor" title="计划医生" width="100" min-width="100"></vxe-column>
		  <vxe-column field="dresult" title="诊断结果" width="200" min-width="100"></vxe-column>
		  <vxe-column field="tsite" title="治疗部位" width="200" min-width="100"></vxe-column>
		  <vxe-column field="planet" title="计划次数" width="80" min-width="80"></vxe-column>
		  <vxe-column field="atreated" title="已经治疗" width="80" min-width="80"></vxe-column>
		  <vxe-column field="pdate" title="计划日期" width="100" min-width="100"></vxe-column>
		  <vxe-column field="pname" title="计划名称" width="150" min-width="150"></vxe-column>
		  <vxe-column field="tnumber" title="靶点数" width="80" min-width="80"></vxe-column>
		  <vxe-column field="remarks" title="备注"></vxe-column>
    
        </vxe-table>
	</div>
</template>

<script>
	export default {
		name: 'page3',
		data() {
			return {
				input3: '',
				tableData: [
				                { id: 10001, name: '张三', sex: '男', age: 56,telphone:13795496257,planedoctor:'张志忠',dresult:'肿瘤早期',tsite:'胸部、脑部',planet:3,atreated:2,pdate:'2021/11/11',pname:'常规治疗',tnumber:'5',remarks:'观察心肌部位数值',time:'2021年11月11日 上午9:30',identify:352987655987456952,SocialNumber:330564164,HistoricalDose:1000,ThisDose:200},
				                { id: 10002, name: '王一一', sex: '男', age: 58,telphone:13795496257,planedoctor:'张志忠',dresult:'肿瘤早期',tsite:'胸部、脑部',planet:3,atreated:2,pdate:'2021/11/11',pname:'常规治疗',tnumber:'5',remarks:'观察心肌部位数值'},
				                { id: 10003, name: '宋保国', sex: '男', age: 54,telphone:13795496257,planedoctor:'张志忠',dresult:'肿瘤早期',tsite:'胸部、脑部',planet:3,atreated:2,pdate:'2021/11/11',pname:'常规治疗',tnumber:'5',remarks:'观察心肌部位数值'},
				                { id: 10004, name: '张远玲', sex: '女', age: 56,telphone:13795496257,planedoctor:'张志忠',dresult:'肿瘤早期',tsite:'胸部、脑部',planet:3,atreated:2,pdate:'2021/11/11',pname:'常规治疗',tnumber:'5',remarks:'观察心肌部位数值'},
				                { id: 10005, name: '张媛媛', sex: '女', age: 49,telphone:13795496257,planedoctor:'张志忠',dresult:'肿瘤早期',tsite:'胸部、脑部',planet:3,atreated:2,pdate:'2021/11/11',pname:'常规治疗',tnumber:'5',remarks:'观察心肌部位数值'},
				                { id: 10006, name: '乔慧慧', sex: '女', age: 50,telphone:13795496257,planedoctor:'张志忠',dresult:'肿瘤早期',tsite:'胸部、脑部',planet:3,atreated:2,pdate:'2021/11/11',pname:'常规治疗',tnumber:'5',remarks:'观察心肌部位数值'}
				              ],
				 childData: [
				                { id: 50004, name: 'Test554', role: 'Designer', sex: '1', age: 33, address: 'test abc' },
				                { id: 50005, name: 'Test555', role: 'Develop', sex: '0', age: 36, address: 'Shanghai' },
				                { id: 50006, name: 'Test556', role: 'Designer', sex: '1', age: 40, address: 'test abc' }
				              ],
				clickrow:0
			}
		},
		methods: {
			
			handCelldbClick(row){	
				// console.log(row.$rowIndex);
				// row.expanded = !row.expanded;
				this.$refs.rowexpand.toggleRowExpand(this.tableData[row.$rowIndex])
				// this.clickrow=row.$rowIndex;
				
			},
			handCellClick(row){
				this.clickrow=row.$rowIndex;
			},
			  cellStyle (row) {	
			              if (this.clickrow==row.rowIndex) {
			                return {
			                  backgroundColor: '#4ac4c0',
			                  color: '#ffffff'
			                }
			              }else{
							  return '';
						  }
			            }
			// toggleRowExpand(row){
			// 	console.log(1)
			// 	console.log(row);
				
			// }

		}
	}
</script>

<style scoped>
	@import url("../assets/css/Page4.css");
</style>
